<template>
  <div class="content">
    <div class="main" id="maintwo"></div>
    <div class="container">
      <p></p>
      <div class="text_item">
        <div
          class="item"
          @click="clickItem(index)"
          v-for="(item, index) in list"
          :key="index"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
  </div>
</template>
  
<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      list: [
        { id: 1, name: "收益" },
        { id: 2, name: "成本收入比" },
        { id: 3, name: "净息差" },
        { id: 4, name: "资产总额" },
        { id: 5, name: "负债总额" },
        { id: 1, name: "收益" },
        { id: 2, name: "成本收入比" },
        { id: 3, name: "净息差" },
        { id: 4, name: "资产总额" },
        { id: 5, name: "负债总额" },
      ],
      num: 0,
      max: 0,
      min: 0,
    };
  },
  mounted() {
    this.getEcharts();
  },
  methods: {
    getEcharts() {
      var chartDom = document.getElementById("maintwo");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "line", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          show: false,
        },

        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
            ],
            axisLabel: {
              show: true, //这里的show用于设置是否显示x轴下的字体 默认为true
              interval: 0, //可以设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
              textStyle: {
                //textStyle里面写x轴下的字体的样式
                color: "#0C4342",
                fontSize: 14,
              },
            },
            axisLine: {
              show: true, //这里的show用于设置是否显示x轴那一条线 默认为true
              lineStyle: {
                //lineStyle里面写x轴那一条线的样式
                color: "#13373A",
                width: 1, //轴线的粗细 我写的是2 最小为0，值为0的时候线隐藏
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "单位:--",
            nameTextStyle: {
              //  单位样式
              color: "#19CBFF", //  字体颜色
              fontSize: 14, //  字体大小
              padding: [0, 15, 4, 0], //  内填充
            },
            splitLine: { show: false },
            axisTick: { show: true },
            axisLabel: { show: true },
            axisLine: { show: true },
            axisLabel: {
              show: true, //这里的show用于设置是否显示x轴下的字体 默认为true
              interval: 0, //可以设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
              textStyle: {
                //textStyle里面写x轴下的字体的样式
                color: "#0C4342",
                fontSize: 14,
              },
            },
            axisLine: {
              show: true, //这里的show用于设置是否显示x轴那一条线 默认为true
              lineStyle: {
                //lineStyle里面写x轴那一条线的样式
                color: "#13373A",
                width: 1, //轴线的粗细 我写的是2 最小为0，值为0的时候线隐藏
              },
            },
          },
        ],

        series: [
          {
            markPoint: {
              data: [
                {
                  yAxis: "420",
                  xAxis: "7月",
                },
              ],
              symbol: "circle", // 标记图形
              symbolSize: 10, // 标记图形的大小
              // 标注点的样式
              itemStyle: {
                color: "#FFF90A", // 标注点颜色
              },
            },
            markLine: {
              // 锁定最后一个元素展示纵向虚线
              symbol: ["none", "none"],
              label: { show: false },
              data: [{ xAxis: 7 - 1 }],
              label: {
                show: true, // 是否展示文字
                color: "#FFF90A",
                fontSize: 14,
                formatter: function () {
                  return "当前值：420";
                },
              },
              lineStyle: {
                color: "#00FFFB",
                type: "solid", // 实线，不写默认虚线
              },
            },
            name: "Line 4",
            type: "line",
            // stack: 'Total',
            smooth: true,
            lineStyle: {
              width: 1,
              color: "#00FFFB",
            },
            showSymbol: true,
            symbol: "circle",
            symbolSize: [10, 10],
            itemStyle: {
              color: "#19CBFF",
            },
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#00FFFB",
                },
                {
                  offset: 1,
                  color: "transparent",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: [20, 402, 231, 134, 190, 330, 420, 534, 90, 30, 20],
          },
        ],
      };

      option && myChart.setOption(option);
    },
    clickItem(index) {
      let that = this;

      // 获取到 container 整个盒子
      var container = document.querySelector(".text_item");
      console.log(container);
      // 获取包裹盒子 container.offsetWidth
      var containerW = container.offsetWidth;

      // 找到所有需要被点击的 item 的集合
      var itemList = document.querySelectorAll(".item");

      // 遍历数组
      for (let i = 0; i < itemList.length; i++) {
        console.log(itemList[i]);
        // 给每个元素添加点击事件
        itemList[i].onclick = function () {
          // 获取到当前点击元素的 offsetLeft  - 包裹盒子 offsetWidth 的一半 + 当前点击元素 offsetWidth 的一半
          var scrollLeftNum =
            itemList[i].offsetLeft -
            containerW / 2 +
            itemList[i].offsetWidth / 2;
          console.log(scrollLeftNum, "距离");

          // 赋值
          container.scrollLeft = scrollLeftNum;
          // console.log(index);
          // if (index > 2) {
          //   that.list.push(that.list.shift())
          // } else {
          //   that.list.unshift(that.list.pop())
          // }
          if (scrollLeftNum > that.max) {
            that.max = scrollLeftNum;
          }
          if (index <= 1) {
            container.scrollLeft = that.max;
          }
          if (index >= 8) {
            container.scrollLeft = 0;
          }
        };
      }
    },
  },
};
</script>
  
<style scoped>
.content {
  /* // margin-top: 17px; */
  width: 100%;
  height: 100%;
  /* background: url("../../assets/image/scienceBg.png") 0 0 no-repeat; */
  background-size: 100% 100%;
}

.main {
  height: 80%;
  width: 100%;
  /* // border: 1px solid red; */
}

.container {
  height: 20%;
  width: 90%;
  background-color: transparent;
  white-space: nowrap;
  overflow: auto;
  position: relative;
  /* 可以使窗口平稳滚动 */
  /* scroll-behavior: smooth; */
  margin: 0 auto;
  text-align: center;
}

.container p {
  width: 100%;
  height: 3px;
  background: linear-gradient(to right, #015159 0%, #25cbfc 50%, #015159 100%);
  position: absolute;
  top: 15px;
}

.text_item {
  /* justify-content: space-around; */
  position: absolute;
  top: 0px;
  width: 100%;
  height: 100%;
  white-space: nowrap;
  overflow-x: auto;
  /* 可以使窗口平稳滚动 */
  scroll-behavior: smooth;
  /* background-color: #00B0B0; */
}

.item {
  display: inline-block;
  width: 20%;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #00b0b0;
  line-height: 17px;
  position: relative;
  margin-top: 27px;
}

.item::after {
  display: inline-block;
  content: "";
  width: 10px;
  height: 10px;
  background-color: blue;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  position: absolute;
  left: 50%;
  top: -15px;
  transform: translateX(-50%);
}

.text_item::-webkit-scrollbar {
  display: none;
}
</style>